<template>
	<!-- 商家信息 -->
	<view class="reaname_wp">
		<view class="reaname_item">
			<view class="reaname_title">
				<text style="opacity: 0;">*</text>审核状态：
				<text class="r_checkstatus" v-if="merchInfo.checkstatus==0">待审核</text>
				<text class="r_checkstatus" v-if="merchInfo.checkstatus==1">审核通过</text>
				<text class="r_checkstatus" v-if="merchInfo.checkstatus==-1">审核失败</text>
			</view>
		</view>
		<view class="reaname_item" v-if="merchInfo.checkstatus==-1">
			<view class="reaname_title">
				<text style="opacity: 0;">*</text>审核结果：
				<text class="r_checkstatus">{{merchInfo.checkremark}}</text>
			</view>
		</view>
		<view class="reaname_photo">
			<view class="reaname_title">
				<text>*</text>品牌LOGO 或 门面图片
			</view>
			<view class="reaname_message">1.支持.png .jpg .gif格式图片</view>
			<view class="reaname_message">2.建议图片尺寸为1:1正方形图片</view>
			<view class="reaname_upload_item1 reaname_upload_item3">
				<image @click="uploadTap('logo')" class="reaname_upload_image reaname_upload_image3"
					:src="merchInfo.logo||'/static/business/logo.png'" ></image>
			</view>
			<view class="reaname_p_change" @click="uploadTap('logo')">点击更换</view>
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>店铺名称
			</view>
			<input v-model="merchInfo.supname" class="reaname_input" type="text" placeholder="如：老王烧烤、老王烧烤(**店)" />
			<!-- <text class="reaname_input" @click="getMsg">{{merchInfo.supname}}</text>s -->
		</view>
		<picker @change="bindPickerChange4" :value="industryindex" :range="industry" :range-key="'name'">
			<view class="reaname_item">
				<view class="reaname_title">
					<text>*</text>入驻行业
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input1" v-if="merchInfo.industryid==''">请选择</view>
					<view class="uni-input" v-else>
						{{merchInfo.industryname}}
					</view>
				</view>
			</view>
		</picker>
		<view class="reaname_item" v-show="merchInfo.industryid==5">
			<view class="reaname_title">
				<text>*</text>是否清真
			</view>
			<uni-data-checkbox v-model="merchInfo.ispig" :localdata="pig"></uni-data-checkbox>
		</view>

		<!-- 		<view class="reaname_item">
			<view class="reaname_title">
				<text></text>商户简述
			</view>
			<input v-model="merchInfo.introduce" class="reaname_input" type="text" placeholder="一句话商户简述" />
		</view> -->
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>主营特色
			</view>
			<input maxlength="8" v-model="merchInfo.shorttitle" class="reaname_input" type="text"
				placeholder="店铺主营或特色(建议4个字)" />
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>人均消费
			</view>
			<input v-model="merchInfo.avgsale" class="reaname_input" type="number" placeholder="人均消费(元)" />
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>联系人
			</view>
			<input v-model="merchInfo.principalname" class="reaname_input" type="text" placeholder="店铺联系人" />
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>预约&咨询电话
			</view>
			<input v-model="merchInfo.principalmobile" class="reaname_input" type="number" maxlength="11"
				placeholder="预约&咨询电话" />
		</view>

		<picker @change="bindPickerChange" :value="provinceindex" :range="provinces" :range-key="'areaname'">
			<view class="reaname_item">
				<view class="reaname_title">
					<text>*</text>所属省份
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input1" v-if="merchInfo.province==''">请选择</view>
					<view class="uni-input" v-else>{{merchInfo.province}}</view>
				</view>
			</view>
		</picker>

		<picker @change="bindPickerChange2" :value="cityindex" :range="city" :range-key="'areaname'">
			<view class="reaname_item">
				<view class="reaname_title">
					<text>*</text>城市
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input1" v-if="merchInfo.city==''">请选择</view>
					<view class="uni-input" v-else>{{merchInfo.city}}</view>
				</view>
			</view>
		</picker>

		<picker @change="bindPickerChange3" :value="districtindex" :range="district" :range-key="'areaname'">
			<view class="reaname_item">
				<view class="reaname_title">
					<text>*</text>县(区)
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input1" v-if="merchInfo.area==''">请选择</view>
					<view class="uni-input" v-else>{{merchInfo.area}}</view>
				</view>
			</view>
		</picker>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>选择导航位置
			</view>
			<view class="reaname_add" @click="getAddress">
				<text v-if="!isDingwei">未定位</text>
				<text v-else>已定位</text>
			</view>
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>门店地址
			</view>
			<input v-model="merchInfo.supaddress" class="reaname_input" type="text" placeholder="填写：XX镇XX路的详细地址" />
		</view>
		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>所在商圈短地址
			</view>
			<input maxlength="11" v-model="merchInfo.shortaddress" class="reaname_input" type="text"
				placeholder="附近商圈名称或短地址(限11个字)" />
		</view>
		
<!-- 		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>营业时间
			</view>
			<input v-model="merchInfo.saletime" class="reaname_input" type="text" value="08:00-20:00" placeholder="填写格式如：09:00-20:00" />
		</view> -->
<!-- 		<view class="reaname_item">
			<view class="reaname_title">
				<text>*</text>营业时间
			</view>
			<input v-model="merchInfo.saletime" class="reaname_input" type="text" value="08:00-20:00" placeholder="填写格式如：09:00-20:00" />
		</view> -->
		<view class="reaname_item business_hours">
			<view class="reaname_title">
				<text>*</text>营业时间
			</view>
			<view style="padding-top: 9rpx;">
				<uni-data-checkbox v-model="saletime_show_id" :localdata="range" @change="settime"></uni-data-checkbox>
				<!-- <radio-group style="transform:scale(0.88)">
					<label class="radio" @click="settime(1)"><radio value="1" :checked="saletime_show_id==1" color="#8801f5" />24小时</label>
					<label class="radio" @click="settime(2)"><radio value="2" :checked="saletime_show_id==2" color="#8801f5"/>分时间段</label>
					<label class="radio" @click="settime(3)"><radio value="3" :checked="saletime_show_id==3" color="#8801f5" />不分时间段</label>
				</radio-group> -->
			</view>
			<view style="width: 100%;margin-top: 10rpx;">
				<input v-model="merchInfo.saletime" class="reaname_input" type="text" style="text-align: left;" placeholder="选择或输入营业时间" />
			</view>
			<!-- <view>
				<button style="margin-right: 10rpx;margin-left: 30rpx;" size="mini" @click="settime()">选择时间</button>
			</view> -->
		</view>
		
		<smh-time-range v-if="saletime_show&&saletime_show_id==3" :time="['08','30','0','17','30']" @confrim="confrim2" @cancel="cancel"></smh-time-range>
		<block v-if="saletime_show&&saletime_show_id==2">
			<smh-time-range :time="['08','30','0','12','00']" @confrim="confrim" @cancel="cancel"></smh-time-range>
			<smh-time-range :time="['14','00','0','17','30']" @confrim="confrim1" @cancel="cancel"></smh-time-range>
		</block>
		
<!-- 		<picker  :value="merchInfo.saletime" :range="saletime" :range-key="'areaname'">
			<view class="reaname_item">
				<text class="tit"><text style="color: #8405dc;">*</text>营业时间</text>
				<view class="uni-list-cell-db">
					<view class="uni-input1" v-if="merchInfo.saletime==''">请选择</view>
					<view class="uni-input" v-else>{{merchInfo.saletime}}</view>
				</view>
			</view>
		</picker> -->
		<view class="reaname_item_t">
			<view class="reaname_title">
				<text>*</text>营业执照
			</view>
			<view class="reaname_upload_item1 reaname_upload_item0">
				<image @click="uploadTap('businesslicense')" class="reaname_upload_image"
					:src="merchInfo.businesslicense||'/static/business/zhizhao.png'" ></image>
			</view>
		</view>
		<view class="reaname_photo">
			<view class="reaname_upload_item1 reaname_upload_item0" style="width: 100%;">
				<uni-file-picker title="其它资质" v-model="merchInfo.qualified" mode="grid" :auto-upload="false" @select="uploadTaps"
					limit="6"></uni-file-picker>
				<!-- <view class="qualified" v-if="merchInfo.qualified">
					<image v-for="img in merchInfo.qualified" class="qualified_img" :src="img"></image>
				</view>
				<block>
					<image @click="uploadTaps('qualified')" class="reaname_upload_image"
						src="/static/business/shizi.jpg" ></image>
				</block> -->
			</view>
		</view>
		<view class="reaname_photo">
			<view class="reaname_title">
				身份证照片
			</view>
			<view class="reaname_message">1.身份证照片不得有遮挡，保证字迹清晰</view>
			<view class="reaname_message">2.请在纯色背景下拍摄，保证身份证边缘清晰</view>
			<view class="reaname_message">3.请从证件的正上方拍摄，防止画面变形</view>
		</view>
		<view class="reaname_upload">
			<view class="reaname_upload_item1">
				<image @click="uploadTap('idportrait')" class="reaname_upload_image"
					:src="merchInfo.idportrait||'/static/business/guohui.png'" ></image>
				<view class="reaname_upload_message">身份证国徽面</view>
			</view>
			<view class="reaname_upload_item2">
				<image @click="uploadTap('idemblem')" class="reaname_upload_image"
					:src="merchInfo.idemblem||'/static/business/renxiang.png'" ></image>
				<view class="reaname_upload_message">身份证人像面</view>
			</view>
		</view>
		<view class="reaname_sumbit" @click="onsumbit" v-if="!onlylook">提交</view>
		<view class="fill" v-show="isShow">
			<view class="fill_item">
				<!-- #ifdef MP-ALIPAY -->
				<l-clipper v-if="isShow" :width="800" :height="800" :is-show-photo-btn="false" :image-url="imageSrc" @success="crop" @cancel="cancelCrop"  />
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<bt-cropper ref="cropper" :ratio="ratio" :imageSrc="imageSrc"></bt-cropper>
				<button @click="crop">确定</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
	export default {
		data() {
			return {
				isShow: false,
				imageSrc: '',
				uid: '',
				saletime_show: true,
				saletime_show_id: 3,
				range: [{"value": 1,"text": "24小时"	},{"value": 2,"text": "分时间段"},{"value":3,"text": "不分时间段"}],
				merchInfo: {
					checkstatus: 0,
					checkremark: '',
					supname: '',
					introduce: '',
					principalname: '',
					principalmobile: '',
					industryid: '',
					industryname: '',
					province: '',
					city: '',
					area: '',
					supaddress: '',
					shortaddress: '',
					shorttitle: '',
					avgsale: '',
					logo: '',
					businesslicense: '',
					qualified:[],
					idportrait: '',
					idemblem: '',
					saletime: '24小时',
					lat: '',
					lng: '',
					ispig: 0,
				},
				pig: [{
					text: '否',
					value: '0'
				}, {
					text: '是',
					value: '1'
				}],
				industry: [],
				industryindex: 0,

				provinces: [],
				provinceindex: 0,

				city: [],
				cityindex: 0,

				district: [],
				districtindex: 0,
				
				saletime1: [
					{
					text: '8:00-16',
					value: '营业1值'
					}, 
					{
					text: '文字2text',
					value: '营业2值'
					},
				],
				isDingwei: false,
				onlylook:0,
			}
		},
		onLoad(options) {
			this.uid = options.uid
			if(options.onlylook) this.onlylook = options.onlylook;
			this.getprovinces();
			this.getLocation();
		},
		methods: {
			getLocation(){
				let that = this;
				/* #ifdef MP-WEIXIN */
				uni.startLocationUpdateBackground({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功',res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x',res.longitude);
							uni.setStorageSync('y',res.latitude);
							// that.getInfo();
							that.$isResolve();
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败',res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x',res.longitude);
									uni.setStorageSync('y',res.latitude);
									// that.getInfo();
									that.$isResolve();
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
				/*#endif*/
				/* #ifdef MP-ALIPAY */
				uni.getLocation({
					type: '0',
					success:res=> {
						console.log('成功',res)
						that.$store.commit('upLocation', {
							x: res.longitude,
							y: res.latitude
						})
						uni.setStorageSync('x',res.longitude);
						uni.setStorageSync('y',res.latitude);
						that.$isResolve();
					}
				});
				/* #endif */
			},
			// 取消时间选择
			cancel(e){
				this.saletime_show = false;
			},
			// 分时间段1
			confrim(e){
				this.merchInfo.saletime = e.time;
			},
			// 分时间段2
			confrim1(e){
				this.merchInfo.saletime += ' '+e.time;
				this.saletime_show = false;
			},
			// 不分时间段
			confrim2(e){
				this.merchInfo.saletime = e.time;
				this.saletime_show = false;
			},
			settime(e){
				this.saletime_show = true;
				if(e.detail.value==1){
					this.merchInfo.saletime = '24小时';
				}
			},
			getAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.merchInfo.lat = res.latitude;
						that.merchInfo.lng = res.longitude;
						that.isDingwei = true;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			getmerchInfo() {
				let url = 'info/getMerch';
				if(this.onlylook==1){
					url = 'info/getCheckMerch';
				}
				this.$axios(url, "POST", 'supplier', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.merchInfo = res.data.data.info;
						if(res.data.data.info.x!=''){
							this.isDingwei = true;
						}
						this.merchInfo.lng=this.merchInfo.x;
						this.merchInfo.lat=this.merchInfo.y;
						if(!res.data.data.info.qualified) {
							this.merchInfo.qualified = []
						}else{
							var arr = [];
							this.merchInfo.qualified.forEach(item=>{
								item = {
									"name": 'name',
									"extname": 'extname',
									"url": item,
								}
								arr.push(item);
							})
							this.merchInfo.qualified = arr;
						}
						if(this.merchInfo.saletime.includes('24小时')){
							this.saletime_show_id = 1;
						}else if(this.merchInfo.saletime.includes(' ')){
							this.saletime_show_id = 2;
						}else{
							this.saletime_show_id = 3;
						}
						this.industry = res.data.data.industry;
					}
				})
			},
			getprovinces() {
				this.$axios('getaddress/info', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.provinces = res.data.data.data;
						this.getmerchInfo();
					}
				})
			},
			// 省
			bindPickerChange(e) {
				this.provinceindex = e.target.value;
				this.merchInfo.province = this.provinces[this.provinceindex].areaname;
				this.$axios('getaddress/info', "POST", 'shop', {
					type: "city",
					parentid: this.provinces[this.provinceindex].id
				}).then(res => {
					if (res.data.code == 200) {
						this.city = res.data.data.data;
						this.merchInfo.city = '';
						this.merchInfo.area = '';
					}
				})
			},
			// 市
			bindPickerChange2(e) {
				if (this.city.length <= 0) return;
				this.cityindex = e.target.value;
				this.merchInfo.city = this.city[this.cityindex].areaname;
				this.$axios('getaddress/info', "POST", 'shop', {
					type: "district",
					parentid: this.city[this.cityindex].id
				}).then(res => {
					if (res.data.code == 200) {
						this.district = res.data.data.data;
						this.merchInfo.area = '';
					}
				})
			},
			// 县
			bindPickerChange3(e) {
				if (this.district.length <= 0) return;
				this.districtindex = e.target.value;
				this.merchInfo.area = this.district[this.districtindex].areaname;
			},
			bindPickerChange4(e) {
				if (this.industry.length <= 0) return;
				this.industryindex = e.target.value;
				this.merchInfo.industryid = this.industry[this.industryindex].id;
				this.merchInfo.industryname = this.industry[this.industryindex].name;
			},
			onsumbit() {
				if (this.merchInfo.supname == '' || this.merchInfo.principalname == '' ||
					this.merchInfo.principalname == '' || this.merchInfo.industryid == '' || this.merchInfo.province ==
					'' || this.merchInfo.city == '' || this.merchInfo.area == '' || this.merchInfo.supaddress == '' || this
					.merchInfo.logo == '' || this.merchInfo.businesslicense == '' || this.merchInfo.shortaddress == '' ||
					this.merchInfo.shorttitle == '' || this.merchInfo.avgsale == '' ||
					this.merchInfo.lat == '' || this.merchInfo.lng == '' || !this.isDingwei){
					this.$api.msg('请完善信息！');
					return;
				}
				if(this.merchInfo.saletime == ''){
					return this.$api.msg('请选择营业时间')
				}
				this.merchInfo.x = this.merchInfo.lng;
				this.merchInfo.y = this.merchInfo.lat;
				this.merchInfo.uid = this.uid;
				if(this.merchInfo.qualified){
					var arrs = [];
					this.merchInfo.qualified.forEach(item=>{
						// item = item.url;
						arrs.push(item.url);
					})
					this.merchInfo.qualified = JSON.stringify(arrs)
				}
				this.$axios('info/merchSave', "POST", 'supplier', this.merchInfo).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！')
						// this.getmerchInfo()
						setTimeout(()=>{
							this.$navBack();
						},1000)
					}
				})

			},
			cancelCrop(){
				this.imageSrc = "";
				this.isShow = false;
			},
			crop(e){
				// #ifdef MP-WEIXIN
			    // 通过组件定义的ref调用cropper方法，返回一个promise对象
			    this.$refs.cropper.crop().then((res)=>{
					this.imgs = res;
					this.upImage('logo',this.imgs);
			    })
				// #endif
				// #ifdef MP-ALIPAY
				this.imgs = e.url;
				this.upImage('logo',this.imgs);
				// #endif
			},
			uploadTap(v) {
				var that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						if(v=='logo'){
							that.imageSrc = res.tempFilePaths[0];
							that.isShow = true;
						}else{
							that.upImage(v,res.tempFilePaths[0])
						}
					}
				})
			},
			upImage(v,url){
				let that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: that.$url.state.url.upload,
					filePath: url,
					name: 'a',
					header: {
						token
					},
					formData: {
						'file': 'a'
					},
					success(upres) {
						var data = JSON.parse(upres.data);
						if (data.code == 200) {
							that.merchInfo[v] = data.data.url;
							that.isShow = false;
						} else {
							that.$api.msg(data.data)
						}
					},
					fail() {
						setTimeout(() => {
							that.$api.msg('上传失败，请重试')
						}, 100)
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			uploadTaps(e){
				var that = this;
						uni.showLoading({
							title: '上传中,请稍后'
						});
						e.tempFilePaths.forEach((image)=>{
							uni.uploadFile({
								url: that.$url.state.url.upload,
								filePath: e.tempFilePaths[0],
								name: 'a',
								header: {
									token: token
								},
								formData: {
									'file': 'a'
								},
								success: upres => {
									let data = JSON.parse(upres.data);
									if (data.code == 200) {
										let extname = data.data.filename.split('.')[1];
										var imgs = {
											"name": data.data.filename,
											"extname": extname,
											"url": data.data.url,
										};
										that.merchInfo.qualified.push(imgs);
									} else {
										that.$api.msg(data.data)
									}
								},
								fail() {
									setTimeout(() => {
										that.$api.msg('上传失败，请重试')
									}, 100)
								},
								complete() {
									uni.hideLoading();
									console.log(that.merchInfo.qualified)
								}
							})
						});
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 60rpx;
	}
	.fill{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(#000,.8);
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
		.fill_item{
			width: 700rpx;
			height: 700rpx;
		}
	}
	.qualified{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.qualified_img{
			width: 300rpx;
			height: 200rpx;
			margin-right: 15rpx;
		}
	}
	.business_hours{
		flex-wrap: wrap;
		.radio{
			margin-right: 20rpx;
		}
	}
	.reaname_wp {
		color: $font-color-dark;
		padding: 0 20upx;
	}
	.reaname_p_change{
		background: rgba(0,0,0,.6);
		color: #fff;
		padding: 4rpx 0;
		width: 150rpx;
		text-align: center;
		border-radius: 6rpx;
	}
	.reaname_item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		align-items: center;
		padding: 20upx 0;
	}

	.reaname_item_t {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		padding: 20upx 0;
	}

	.reaname_title text {
		color: #FF0000;
		font-size: 36upx;
	}

	.reaname_input,
	.reaname_textarea,
	.reaname_add {
		color: $font-color-dark;
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		
	}

	.reaname_title .r_checkstatus {
		font-size: 32upx;
	}

	.reaname_textarea {
		width: 100%;
		text-align: left;
		margin: 10upx 15upx 0;
		min-height: 35upx;
		line-height: 35upx;
	}

	.reaname_thumb {
		display: flex;
		align-items: flex-start;
	}

	.t_body {
		height: calc((100vw - 100upx) /6);
		margin: 20upx 10upx 0;
		position: relative;
		width: calc(100% / 3);
	}

	.t_body image {
		height: 100%;
		width: 100%;
	}

	.t_body text {
		background: #FF0000;
		border-radius: 50%;
		color: #fff;
		height: 50upx;
		line-height: 40upx;
		font-size: 40upx;
		position: absolute;
		top: -10upx;
		right: -10upx;
		text-align: center;
		width: 50upx;
	}

	.reaname_thumb_upload {
		border: 1px #d3d3d3 solid;
		border-radius: 15upx;
	}

	.reaname_message {
		color: $font-color-light;
		font-size: $font-sm;
		line-height: 50upx;
	}

	.reaname_upload {
		margin-top: 30upx;
		display: flex;
		align-items: center;
	}

	.reaname_upload_item1,
	.reaname_upload_item2 {
		box-sizing: border-box;
		padding-right: 10upx;
		width: 50%;
	}

	.reaname_upload_item0,
	.reaname_upload_item3 {
		padding-top: 20upx;
	}

	.reaname_upload_item2 {
		padding-left: 10upx;
	}

	.reaname_upload_image {
		border-radius: 10upx;
		width: 327upx;
		height: 203upx;
	}

	.reaname_upload_image3 {
		height: 150upx;
		width: 150upx;
	}

	.reaname_upload_message {
		text-align: center;
	}

	.reaname_sumbit {
		background-color: $base-color;
		border-radius: 40upx;
		color: #fff;
		font-size: 30upx;
		line-height: 70upx;
		margin: 60upx auto;
		text-align: center;
		letter-spacing: 3px;
		width: 90%;
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
	}

	.uni-list-cell-db {
		flex: 1;
		text-align: right;
	}

	.uni-input1 {
		color: grey;
	}
</style>